<template>
  <div>
    <el-card>
      <span v-if="doctor==null">暂无认证信息</span>
      <el-descriptions v-if="this.doctor.id" class="margin-top" title="医护人员信息认证" :column="3" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="editHandle">认证/修改信息</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            头像
          </template>
          <div class="demo-image">
            <div class="block">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="doctor.imageUrl"
                  fit="fill"></el-image>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{doctor.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            年龄
          </template>
          {{doctor.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            性别
          </template>
          <span v-show="doctor.gender">{{doctor.gender}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            职称
          </template>
          {{doctor.professionalTitle}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            所属科室
          </template>
          {{doctor.depName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            擅长领域
          </template>
          {{doctor.expertise}}
        </el-descriptions-item>
      </el-descriptions>
      <div v-else>
          <el-button type="primary" size="small" @click="editHandle">认证/修改信息</el-button>
        <div>
          请先添加认证信息
        </div>
      </div>
      <div v-if="advice" class="advice-wrapper">信息认证审核失败，原因：<span>{{advice}}</span>，请重新修改</div>
    </el-card>

    <el-dialog
        title="信息认证"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogVisible=false"
        >
      <!--内容主体区 -->
      <!-- ref是给el-form起引用名称 -->
      <el-form :model="editForm" ref="addFormRef" label-width="70px">
        <el-form-item label="头像" class="upload-wrapper">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/file/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="editForm.imageUrl" :src="editForm.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="名字" prop="title">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="content">
          <el-radio v-model="editForm.gender" label=0>男</el-radio>
          <el-radio v-model="editForm.gender" label=1>女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="professionalTitle">
          <el-radio v-model="editForm.professionalTitle" label="医师">医师</el-radio>
          <el-radio v-model="editForm.professionalTitle" label="副主任医师">副主任医师</el-radio>
          <el-radio v-model="editForm.professionalTitle" label="主任医师">主任医师</el-radio>
          <el-radio v-model="editForm.professionalTitle" label="主治医师">主治医师</el-radio>
        </el-form-item>
        <el-form-item label="擅长领域" prop="expertise">
          <el-input v-model="editForm.expertise"></el-input>
        </el-form-item>
        <el-form-item label="所属科室" prop="depcode">
          <el-cascader
              ref="depList"
              :options="depList"
              :props="{label:'name'}"
              @change="handleChange"
              :show-all-levels="false"
              clearable>
          </el-cascader>
        </el-form-item>
      </el-form>

      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false,editForm={},imageUrl=null">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import docApi from '@/api/doctor'
import dictApi from '@/api/dict'
export default {
  name: "Certificate",
  data(){
    return{
      addDialogVisible:false,
      imageUrl:null,
      advice:'',
      doctor:{},
      editForm:{},
      depList:[]
    }
  },
  created() {
    this.init()
  },
  computed:{
    ...mapState(['user'])
  },
  methods:{
    handleChange(){
      this.editForm.depcode = this.$refs["depList"].getCheckedNodes()[0].value;
    },
    editHandle(){
      this.addDialogVisible = true
      this.editForm = this.doctor
    },
    async submitForm(){
      let code
      this.editForm.accountId = this.user.userId
      if (this.editForm.id) {
        const {data: res} = await docApi.update(this.editForm)
        code = res.code
      } else {
        const {data:res} = await docApi.save(this.editForm)
        code = res.code
      }
      if(code===200){
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
        });
        location.reload()
        this.dialogVisible = false
      }
    },

    async getDocInfo(){
      //查询出医护人员信息
      const{data:res} = await docApi.findByUserId(this.user.userId)
      if (res.code!==200){
        return this.$message.error("查询失败")
      }
      this.doctor = res.data
    },
    async init(){
      //获取所有科室
      await this.getDepList()
     //获取医护人员信息
      await this.getDocInfo()
      await this.getAdvice()
    },
    async getAdvice(){
      if (this.doctor.authStatus===2){
        const{data:res} = await docApi.getAdvice(this.doctor.id)
        this.advice = res.data
      }
    },
    //获取所有科室
    async getDepList(){
      const{data:res} = await dictApi.findChildData(86)
      if (res.code!==200){
        return this.$message.error("查询失败")
      }
      this.depList = res.data
    },
    async handleAvatarSuccess(res, file, fileList){
      this.editForm.imageUrl = res.data
    },
    beforeAvatarUpload(file){
      const uploadTypes = ['jpg', 'png','jpeg']
      const filetype = file.name.replace(/.+\./, '')
      const uploadLimit=2
      const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
      if (!isRightSize) {
        this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
        return false
      }

      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message: '请上传后缀名为jpg、png、或jpeg的附件'
        })
        return false
      }
      return true
    },
  }
}
</script>

<style lang="less" scoped>
.upload-wrapper{
  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader{
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #000000;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.advice-wrapper{
  margin-top: 20px;
  span{
    color: red;
    font-weight: bold;
  }
}
</style>